<template>
  <div class="publish-container">
    <!-- 顶部操作栏 -->
    <div class="btn-group">
      <button class="back-btn" @click="goBack">
        <el-icon><ArrowLeft /></el-icon> 返回
      </button>
      <button class="save-btn" @click="saveAction">
        <el-icon><Check /></el-icon> 保存
      </button>
    </div>

    <!-- 主体内容 -->
    <div class="content-grid">
      <!-- 左侧信息 -->
      <div class="left-column">
        <!-- 动作名称 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><Edit /></el-icon>
            动作名称
          </div>
          <input v-model="form.name" class="title-input" placeholder="请输入动作名称" />
        </div>

        <!-- 动作标签 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><PriceTag /></el-icon>
            动作标签
          </div>
          <div class="tag-container">
            <el-tag
              v-for="tag in form.tags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="removeTag(tag)"
              type="success"
              size="large"
            >
              {{ tag }}
            </el-tag>
          </div>
          <el-input
            v-model="inputTag"
            class="tag-input"
            placeholder="输入标签并按Enter添加"
            @keyup.enter="addTag"
            clearable
          >
            <template #append>
              <el-button @click="addTag">
                <el-icon><Plus /></el-icon>
                添加
              </el-button>
            </template>
          </el-input>
        </div>

        <!-- 动作图片 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><Picture /></el-icon>
            动作图片
          </div>
          <el-upload
            class="image-uploader"
            action="http://localhost:9090/files/upload"
            :show-file-list="false"
            :on-success="handleImageSuccess"
          >
            <div v-if="form.image" class="upload-area image-preview">
              <img :src="form.image" class="preview-image" />
            </div>
            <div v-else class="upload-area">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <div class="upload-text">上传动作图片</div>
              <div class="upload-info">支持JPG/PNG格式</div>
            </div>
          </el-upload>
        </div>

        <!-- 动作视频 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><VideoPlay /></el-icon>
            动作视频
          </div>
          <el-upload
            class="video-uploader"
            action="http://localhost:9090/files/upload"
            :show-file-list="false"
            :on-success="handleVideoSuccess"
          >
            <div v-if="form.vedio" class="upload-area video-preview">
              <video :src="form.vedio" controls class="preview-video"></video>
            </div>
            <div v-else class="upload-area">
              <el-icon class="upload-icon"><VideoPlay /></el-icon>
              <div class="upload-text">上传动作视频</div>
              <div class="upload-info">支持MP4格式</div>
            </div>
          </el-upload>
        </div>
      </div>

      <!-- 右侧信息 -->
      <div class="right-column">
        <!-- 动作描述 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            动作描述
          </div>
          <div class="textarea-container">
            <textarea v-model="form.description" class="description-input" placeholder="详细描述动作的做法和要点"></textarea>
          </div>
        </div>

        <!-- 注意事项 -->
        <div class="form-card">
          <div class="section-title">
            <el-icon><Warning /></el-icon>
            注意事项
          </div>
          <div class="textarea-container">
            <textarea v-model="form.notice" class="description-input" placeholder="记录动作的注意事项和安全提示"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ArrowLeft, Check, Plus, VideoPlay, Edit, PriceTag, Picture, Document, Warning } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const form = reactive({
  name: '',     // 动作名称
  tags: [],     // 动作标签
  image: '',    // 动作图片
  vedio: '',    // 动作视频
  description: '',  // 动作描述
  notice: ''    // 注意事项
})

const inputTag = ref('')

// 添加标签
const addTag = () => {
  const tag = inputTag.value.trim()
  if (tag && !form.tags.includes(tag)) {
    form.tags.push(tag)
    inputTag.value = ''
  } else if (form.tags.includes(tag)) {
    ElMessage.warning('标签已存在')
  }
}

// 移除标签
const removeTag = (tag) => {
  const index = form.tags.indexOf(tag)
  if (index > -1) {
    form.tags.splice(index, 1)
  }
}

// 处理图片上传成功
const handleImageSuccess = (res) => {
  form.image = res.data
  ElMessage.success('图片上传成功')
}

// 处理视频上传成功
const handleVideoSuccess = (res) => {
  form.vedio = res.data
  ElMessage.success('视频上传成功')
}

// 返回上一页
const goBack = () => {
  router.push('/actionLibrary')
}

// 保存动作
const saveAction = async () => {
  // 表单验证
  if (!form.name.trim()) return ElMessage.warning('动作名称不能为空')
  if (form.tags.length === 0) ElMessage.warning('建议添加至少一个标签')
  
  try {
    // 构建请求数据
    const requestData = {
      ...form,
      tags: form.tags.length > 0 ? JSON.stringify(form.tags) : null
    }
    
    // 这里应该调用API保存数据
    // 模拟API调用
    console.log('保存动作数据:', requestData)
    
    // 模拟成功响应
    ElMessage.success('动作保存成功')
    
    // 返回动作库页面
    router.push('/actionLibrary')
  } catch (error) {
    console.error('保存动作失败:', error)
    ElMessage.error('保存失败，请重试')
  }
}
</script>

<style scoped>
.publish-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  padding: 1.5rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.25rem; /* 基础字体大小设置为20px (16px * 1.25) */
}

/* 按钮区域样式 */
.btn-group {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
}

.save-btn {
  background: linear-gradient(135deg, #27AE60, #66bb6a);
  border: none;
  color: white;
  padding: 0.75rem 2.25rem;
  font-weight: 500;
  border-radius: 0.625rem;
  font-size: 1.3125rem; /* 21px */
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(39, 174, 96, 0.3);
}

.save-btn:hover {
  background: linear-gradient(135deg, #219653, #4caf50);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 0.9375rem rgba(39, 174, 96, 0.4);
}

.back-btn {
  color: #27AE60;
  background: #fff;
  border: 0.0625rem solid #27AE60;
  padding: 0.75rem 1.75rem;
  font-weight: 500;
  border-radius: 0.625rem;
  font-size: 1.3125rem; /* 21px */
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.back-btn:hover {
  background: #f0f9f0;
  transform: translateY(-0.125rem);
}

/* 主体内容区样式 */
.content-grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 1.25rem;
  min-height: calc(100vh - 11.25rem);
}

.left-column, .right-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.right-column {
  height: fit-content;
  min-height: 100%;
}

/* 表单卡片通用样式 */
.form-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  padding: 1.5625rem;
  border: 0.0625rem solid #eee;
  transition: all 0.3s ease;
  overflow: hidden;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.form-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.375rem 0.9375rem rgba(39, 174, 96, 0.25);
}

.section-title {
  height: 2.5rem;
  font-size: 1.4375rem; /* 23px */
  color: #27AE60;
  font-weight: 600;
  margin-bottom: 1.125rem;
  position: relative;
  padding-left: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  height: 1.25rem;
  width: 0.25rem;
  background: #27AE60;
  border-radius: 0.125rem;
}

/* 标题输入区域 */
.title-input {
  border: 0.125rem solid #e0e0e0;
  font-size: 1.375rem; /* 22px */
  padding: 0.75rem 0.9375rem;
  color: #333;
  font-weight: 500;
  width: 100%;
  outline: none;
  transition: all 0.3s ease;
  border-radius: 0.625rem;
  box-sizing: border-box;
}

.title-input:focus {
  border-color: #a5d6a7;
  box-shadow: 0 0 0 0.125rem rgba(39, 174, 96, 0.2);
}

.title-input::placeholder {
  color: #ccc;
}

/* 标签区域 */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.9375rem;
}

/* 标签输入样式 */
.tag-input {
  margin-top: 0.9375rem;
  width: 100%;
}

/* 描述输入区域容器 */
.textarea-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 25rem;
}

/* 描述输入区域 */
.description-input {
  width: 100%;
  padding: 0.9375rem;
  border: 0.125rem solid #e0e0e0;
  border-radius: 0.75rem;
  font-size: 1.25rem; /* 20px */
  resize: none;
  transition: all 0.3s ease;
  line-height: 1.6;
  flex: 1;
  box-sizing: border-box;
}

.description-input:focus {
  border-color: #a5d6a7;
  box-shadow: 0 0 0 0.125rem rgba(39, 174, 96, 0.2);
  outline: none;
}

/* 图片上传区域 */
.image-uploader, .video-uploader {
  width: 100%;
  cursor: pointer;
  display: block;
}

.upload-area {
  border: 0.125rem dashed #e0e0e0;
  border-radius: 0.75rem;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.875rem;
  text-align: center;
  height: 18.75rem;
  width: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
  box-sizing: border-box;
  flex: 1;
}

.upload-area:hover {
  border-color: #a5d6a7;
  background-color: #f0f9f0;
}

.image-preview, .video-preview {
  padding: 0;
  height: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  width: 100%;
  height: 18.75rem;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

.preview-video {
  width: 100%;
  height: 18.75rem;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}

.upload-icon {
  font-size: 2.8125rem;
  color: #27AE60;
  margin-bottom: 0.75rem;
}

.upload-text {
  color: #27AE60;
  font-weight: 500;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.upload-info {
  font-size: 1.0625rem;
  color: #999;
  margin: 0;
  line-height: 1.4;
}

/* 响应式布局优化 */
@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 45% 55%;
  }
  
  .textarea-container {
    min-height: 18.75rem;
  }
  
  .upload-area {
    height: 15rem;
  }
  
  .preview-image, .preview-video {
    height: 15rem;
  }
}

@media (max-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .publish-container {
    padding: 0.9375rem;
  }
  
  .btn-group {
    flex-direction: column;
    gap: 0.9375rem;
    align-items: stretch;
  }

  .back-btn, .save-btn {
    justify-content: center;
  }
  
  .upload-area {
    height: 15rem;
    padding: 1.25rem;
  }
  
  .preview-image, .preview-video {
    height: 15rem;
  }
  
  .textarea-container {
    min-height: 15rem;
  }
  
  .section-title {
    font-size: 1.3125rem; /* 21px */
    height: 2.25rem;
  }
  
  .title-input {
    font-size: 1.25rem; /* 20px */
    padding: 0.625rem 0.75rem;
  }
  
  .description-input {
    font-size: 1.125rem; /* 18px */
    padding: 0.75rem;
  }
  
  .upload-text {
    font-size: 1.125rem; /* 18px */
  }
  
  .upload-info {
    font-size: 1rem; /* 16px */
  }
}
</style>